<template>
	<view class="all-main">
		<view class="main">
			<!-- 审核未通过 -->
			<view v-if="userinfo.bill_state == 1" class="check-failed">
				<!-- 未申请 -->
				<view v-if="!is_apply" class="notapply">
					<view class="bill-msg">
						<u-icon name="info-circle-fill" color="#fa3534" size="30"></u-icon>
						<text>请先上传身份证(正、反面)，然后仔细阅读承诺函，并且签名确认。</text>
					</view>
					<view class="idcard-front">
						<u-upload :fileList="positive" @afterRead="_positive" @delete="delete_positive" name="1"
							imageMode="aspectFit" :maxCount="1" width="200" height="150">
							<image src="@/static/sfz_z.png" mode="aspectFit" style="width: 200px; height: 150px;">
							</image>
						</u-upload>
					</view>
					<view class="idcard-back">
						<u-upload :fileList="reverse" @afterRead="_reverse" @delete="delete_reverse" name="2"
							imageMode="aspectFit" :maxCount="1" width="200" height="150">
							<image src="@/static/sfz_f.jpg" mode="aspectFit" style="width: 200px; height: 150px;">
							</image>
						</u-upload>
					</view>
					<view class="agreement">
						<checkbox value="checked" disabled="true" :checked="checked" style="transform:scale(0.7)" />
						<view class="msg" @click="agreement">
							请认真阅读
							<text>《承诺函》</text>
							，并确认签名
						</view>
					</view>
					<view class="btns" @click="applyClick">
						申请
					</view>
				</view>
				<!-- 已申请 -->
				<view v-else class="apply">
					<view class="title">
						<u-icon name="hourglass-half-fill" v-if="bill_apply.check_state == 1" color="#ff9900"
							size="28"></u-icon>
						<u-icon name="checkbox-mark" v-else-if="bill_apply.check_state == 2" color="#19be6b"
							size="28"></u-icon>
						<u-icon name="close-circle-fill" v-else color="#fa3534" size="28"></u-icon>
						<view class="check_state">
							<text v-if="bill_apply.check_state == 1" class="warms">平台审核中</text>
							<text v-else-if="bill_apply.check_state == 2" class="greens">审核通过</text>
							<text v-else class="reds">审核不通过</text>
						</view>
					</view>
					<view class="apply-con">
						<view v-if="bill_apply.check_state == 1" class="msg">
							<text>申请时间：{{bill_apply.create_time}}，平台审核【1~3个工作日】</text>
						</view>
						<view v-if="bill_apply.check_state == 3" class="msg reds">
							<text>原因：{{bill_apply.check_msg}}</text>
						</view>
					</view>
					<view class="btns-box">
						<view v-if="bill_apply.check_state == 3" class="btns edits" @click="edits">
							<text>去修改</text>
						</view>
						<view class="btns goback" @click="goback">
							<text>返回</text>
						</view>
					</view>
					<view class="apply-info">
						<view class="titles">
							<text>已提交资料</text>
						</view>
						<view class="lists">
							<view class="items">
								<view class="tips">
									<text>身份证人像面</text>
								</view>
								<view class="images">
									<image v-if="bill_apply.idcard_front != ''" :src="api_url + bill_apply.idcard_front"
										style="width: 150px; height: 150px;"></image>
								</view>
							</view>
							<view class="items">
								<view class="tips">
									<text>身份证国徽面</text>
								</view>
								<view class="images">
									<image v-if="bill_apply.idcard_back != ''" :src="api_url + bill_apply.idcard_back"
										style="width: 150px; height: 150px;"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 审核已通过 -->
			<view v-else class="check-passed">
				<view class="title">
					<view class="btns" @click="billAdd">
						<u-icon name="plus" color="#ffffff"></u-icon>
						<text>新建账单服务</text>
					</view>
					<u-icon name="setting" size="22" @click="billSetting"></u-icon>
				</view>
				<view v-if="billData.length > 0" class="lists">
					<view v-for="(item, index) in billData" :key="index" class="items">
						<view class="tops">
							<view class="froms">
								<text>{{item.to_agent_name}}</text>
							</view>
							<view class="moneys">
								<text>{{item.money}}</text>
							</view>
						</view>
						<view class="cons">
							<view class="lefts">
								<text>账单号</text>
							</view>
							<view class="rights">
								<text>{{item.order_no}}</text>
							</view>
						</view>
						<view class="cons">
							<view class="lefts">
								<text>费用类型</text>
							</view>
							<view class="rights">
								<text>{{item.type_txt}}</text>
							</view>
						</view>
						<view class="cons">
							<view class="lefts">
								<text>备注</text>
							</view>
							<view class="rights">
								<text>{{item.meno}}</text>
							</view>
						</view>
						<view class="cons">
							<view class="lefts">
								<text>账单时间</text>
							</view>
							<view class="rights">
								<text>{{item.entry_time}}</text>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-else mode="list" icon="/static/Empty/data_null.png"></u-empty>
			</view>
			<!-- 设置账单密码 -->
			<u-modal :show="billPass.show" :title="billPass.title" cancelText="取消" showCancelButton
				@cancel="billPass.show = false" @confirm="billPassSub">
				<view class="slot-content">
					<view class="passwords">
						<view class="tags">
							<text>账单密码</text>
						</view>
						<view class="inputs">
							<u-code-input v-model="billPass.password" mode="line" hairline :maxlength="6" space="17"
								:focus="true" dot></u-code-input>
						</view>
					</view>
					<view class="passwords codes">
						<view class="tags">
							<text>发送验证码到({{billPass.phoneTxt}})</text>
						</view>
						<view class="inputs">
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="billPass.code" placeholder="验证码">
							<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input v-model="billPass.code" placeholder="验证码">
								<!-- #endif -->
									<template slot="suffix">
										<u-code ref="uCode" @change="codeChange" seconds="60"
											changeText="X秒重新获取"></u-code>
										<u-button @tap="getCode" :text="billPass.tips" type="success"
											size="mini"></u-button>
									</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</u-modal>
			<!-- 验证账单密码 -->
			<u-modal :show="verifyData.show" :title="verifyData.title" cancelText="取消" showCancelButton
				@cancel="verifyData.show = false" @confirm="verifySub">
				<view class="slot-content">
					<view class="passwords">
						<view class="tags">
							<text>账单密码</text>
						</view>
						<view class="inputs">
							<u-code-input v-model="verifyData.password" mode="line" hairline :maxlength="6" space="17"
								:focus="true" dot></u-code-input>
						</view>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/js_sdk/mmmm-image-tools/index.js'
	var util = require('@/util/request.js');
	export default {
		data() {
			return {
				is_apply: false,
				bill_apply: {},
				positive: [],
				positive_file: '',
				reverse: [],
				reverse_file: '',
				nmb: 0,
				checked: false,
				signFile: '',
				userinfo: {},
				api_url: '',
				billData: [],
				billPass: {
					type: 1,
					show: false,
					title: '设置账单密码',
					password: '',
					code: '',
					phone: '',
					phoneTxt: '',
					tips: '获取验证码',
				},
				verifyData: {
					show: false,
					title: '设置账单密码',
					password: '',
				}
			};
		},
		onLoad() {
			this.api_url = util.API_URL
		},
		onShow() {
			let that = this
			this.userinfo = uni.getStorageSync('userinfo');
			uni.$on('signFile', function(data) {
				that.signFile = data
				if (data != null || data != '') {
					that.checked = true
				}
			})
			this.billPass.phone = this.userinfo.phone
			this.billPass.phoneTxt = this.userinfo.phone.slice(0, 3) + "****" + this.userinfo.phone.slice(7)
			if (this.userinfo.bill_state == 1) {
				this.loadData()
			} else {
				if (this.userinfo.bill_password_state == 1) {
					this.billPass.show = true
				} else {
					this.billPass.type = 2
				}
				this.getBillData()
			}
		},
		watch: {
			value(newValue, oldValue) {
				// console.log('v-model', newValue);
			}
		},
		methods: {
			// 加载入账申请
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'bill/getBillApply'
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.bill_apply = res.data
					if (res.data !== null) {
						this.is_apply = true
					}
				}
			},
			async getBillData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'bill/getBillLists'
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.billData = res.data
				}
			},
			// 图片上传
			async uploadFile(index, base) {
				uni.showLoading({
					title: '上传中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'common/uploadFile',
					data: {
						file: base
					},
				});
				uni.hideLoading()
				if (res.code == 200) {
					if (index == 1) {
						this.positive_file = res.data.url
					} else if (index == 2) {
						this.reverse_file = res.data.url
					}
				}
			},
			// 人像添加
			_positive(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(1, base64)
						_this.positive = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			// 人像删除
			delete_positive(e) {
				this.positive = []
				this.positive_file = ""
				this.nmb--
			},
			// 国徽上传
			_reverse(e) {
				let _this = this
				pathToBase64(e.file.url)
					.then(base64 => {
						_this.uploadFile(2, base64)
						_this.reverse = [{
							url: e.file.url
						}]
						_this.nmb++
					})
					.catch(error => {
						console.error(error)
					})
			},
			// 国徽删除
			delete_reverse(e) {
				this.reverse = []
				this.reverse_file = ""
				this.nmb--
			},
			// 点击协议
			agreement() {
				uni.navigateTo({
					url: '/pages/mine/bill/agreement'
				})
			},
			// 账单申请提交
			applyClick() {
				let that = this
				if (this.positive_file == '') {
					uni.showToast({
						title: '请上传身份证人像面',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if (this.reverse_file == '') {
					uni.showToast({
						title: '请上传身份证国徽面',
						duration: 2000,
						icon: 'none'
					});
					return false
				}
				if (!this.checked) {
					uni.showModal({
						title: '提示',
						content: '请认真阅读《承诺函》并确认签名',
						confirmText: '去阅读并签名',
						cancelText: '取消',
						showConfirmButton: true,
						showCancelButton: true,
						success: function(ress) {
							if (ress.confirm) {
								that.agreement()
							}
						}
					});
					return false
				}
				uni.showModal({
					title: '提示',
					content: '确定要提交申请吗？',
					success: function(ress) {
						if (ress.confirm) {
							that.applyFun()
						}
					}
				});
			},
			// 账单申请提交 - API
			async applyFun() {
				var that = this
				uni.showLoading({
					title: '提交中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'bill/setBillApply',
					data: {
						idcard_front: this.positive_file,
						idcard_back: this.reverse_file,
						sign_path: this.signFile
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					setTimeout(function() {
						that.loadData()
					}, 1000)
				}
			},
			// 修改
			edits() {
				uni.navigateTo({
					url: '/pages/mine/bill/edits'
				})
			},
			// 返回
			goback() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 新建账单服务
			billAdd() {
				if (this.userinfo.bill_password_state == 2) {
					this.verifyData.show = true
				} else {
					this.billPass.show = true
				}
			},
			// 点击设置
			billSetting() {
				if (this.userinfo.bill_password_state == 2) {
					this.billPass.type = 2
					this.billPass.title = "修改账单密码"
				}
				this.billPass.show = true
			},
			// 倒计时
			codeChange(text) {
				this.billPass.tips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					this.V_Code()
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 发送验证码
			async V_Code() {
				uni.showLoading({
					title: '正在获取验证码'
				})
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/send',
					data: {
						mobile: this.billPass.phone,
						event: 'bill'
					},
				});
				uni.hideLoading();
				if (res.code == 200) {
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					this.$refs.uCode.start();
				}
			},
			// 账单密码提交
			billPassSub() {
				if (this.billPass.password == '') {
					uni.showToast({
						title: "请输入账单密码",
						duration: 2000,
						icon: "none"
					});
					return false
				} else {
					if (this.billPass.password.length < 6) {
						uni.showToast({
							title: "账单密码格式错误",
							duration: 2000,
							icon: "none"
						});
						return false
					}
				}
				if (this.billPass.code == '') {
					uni.showToast({
						title: "请输入验证码",
						duration: 2000,
						icon: "none"
					});
					return false
				}
				this.billPassSubFun()
			},
			// 账单密码提交 - API
			async billPassSubFun() {
				uni.showLoading({
					title: '提交中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'bill/setBillPassword',
					data: {
						type: this.billPass.type,
						password: this.billPass.password,
						mobile: this.billPass.phone,
						event: 'bill',
						code: this.billPass.code,
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					this.billPass.show = false
					this.billPass.password = ''
					this.billPass.code = ''
					this.userinfo.bill_password_state = 2
					uni.setStorageSync('userinfo', this.userinfo);
				}
			},
			// 验证密码提交
			verifySub() {
				if (this.verifyData.password == '') {
					uni.showToast({
						title: "请输入账单密码",
						duration: 2000,
						icon: "none"
					});
					return false
				} else {
					if (this.verifyData.password.length < 6) {
						uni.showToast({
							title: "账单密码格式错误",
							duration: 2000,
							icon: "none"
						});
						return false
					}
				}
				this.verifySubFun()
			},
			// 验证密码提交 - API
			async verifySubFun() {
				uni.showLoading({
					title: '提交中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'bill/verifyBillPassword',
					data: {
						password: this.verifyData.password
					}
				});
				uni.hideLoading()
				uni.showToast({
					title: res.msg,
					duration: 2000,
					icon: 'none'
				});
				if (res.code == 200) {
					this.verifyData.password = ''
					this.verifyData.show = false
					uni.navigateTo({
						url: '/pages/mine/bill/billAdd'
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			padding: 30rpx;

			.check-failed {
				.notapply {
					position: relative;

					.bill-msg {
						display: flex;
						background-color: #ffffff;
						padding: 30rpx;
						border-radius: 10rpx;

						text {
							padding-left: 20rpx;
							font-size: 28rpx;
							color: #fa3534;
						}

					}

					.idcard-front {
						padding: 20rpx;
						margin-top: 30rpx;
						background-color: #ffffff;
						border-radius: 10rpx;
						display: flex;
						justify-content: center;
					}

					.idcard-back {
						padding: 20rpx;
						margin-top: 30rpx;
						background-color: #ffffff;
						border-radius: 10rpx;
						display: flex;
						justify-content: center;
					}

					.u-upload {
						flex: 0 !important;
					}

					.agreement {
						margin-top: 30rpx;
						display: flex;
						align-items: center;

						.msg {
							font-size: 24rpx;

							text {
								color: #2979ff;
							}
						}
					}

					.btns {
						position: fixed;
						bottom: 0;
						left: 0;
						right: 0;
						padding: 30rpx;
						text-align: center;
						background-color: #2979ff;
						font-size: 34rpx;
						color: #ffffff;
					}
				}

				.apply {
					background-color: #ffffff;
					border-radius: 10rpx;
					padding: 30rpx;

					.title {
						margin-top: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.check_state {
							padding-left: 20rpx;
							font-size: 40rpx;
							font-weight: bold;
						}
					}

					.apply-con {
						margin-top: 100rpx;
						font-size: 24rpx;
						text-align: center;
					}

					.btns-box {
						padding: 100rpx 0;
						display: flex;
						justify-content: center;
						font-size: 28rpx;
						border-bottom: 1px solid #f4f4f5;

						.btns {
							padding: 20rpx 60rpx;
							border-radius: 10rpx;
						}

						.edits {
							background-color: #2979ff;
							color: #ffffff;
						}

						.goback {
							margin-left: 30rpx;
							background-color: #909399;
							color: #ffffff;
						}
					}

					.apply-info {

						.titles {
							padding: 30rpx 0;
							border-bottom: 1px dashed #f4f4f5;
							color: #909399;
						}

						.lists {
							display: flex;

							.items {
								width: 50%;

								.tips {
									width: 100%;
									font-size: 26rpx;
									text-align: center;
									padding: 30rpx 0;
									color: #909399;
								}

								.images {
									width: 100%;
									text-align: center;
								}
							}
						}
					}

					.warms {
						color: #ff9900;
					}

					.reds {
						color: #fa3534;
					}

					.greens {
						color: #19be6b;
					}
				}
			}

			.check-passed {

				.title {
					background-color: #ffffff;
					padding: 30rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					padding-bottom: 30rpx;
					box-shadow: 7px 0px 30px -18px #888888;

					.btns {
						background-color: #2979ff;
						color: #ffffff;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						font-size: 28rpx;
						display: flex;

						text {
							padding-left: 16rpx;
						}
					}
				}

				.lists {

					.items {
						background-color: #ffffff;
						padding: 30rpx;
						border-radius: 10rpx;
						margin-top: 30rpx;
						padding: 30rpx;
						font-size: 28rpx;
						box-shadow: 7px 0px 30px -18px #888888;
						
						.tops {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-bottom: 30rpx;
							border-bottom: 1px solid #f4f4f5;
							font-size: 32rpx;
							font-weight: bold;
							
							.moneys {
								color: #fa3534;
								font-size: 36rpx;
							}
						}
						
						.cons {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 20rpx 0;
							border-bottom: 1px dashed #f4f4f5;
							
							.rights {
								color: #909399;
							}
						}
					}
				}
			}

			.slot-content {

				.passwords {
					margin-top: 30rpx;

					.tags {
						font-size: 28rpx;
						color: #909399;
					}
				}

				.codes {

					.tags {
						font-size: 26rpx;
						color: #909399;
					}

					.inputs {
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>